<template>
    <div class="log-management">
      <div class="search-bar">
        <input type="text" placeholder="IP地址" v-model="query.ip" />
        <input type="date" v-model="query.startDate" />
        <input type="date" v-model="query.endDate" />
        <button class="btn-search" @click="fetchLogs">查询</button>
        <button class="btn-reset" @click="resetFilters">重置</button>
      </div>
      <table class="log-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>IP地址</th>
            <th>用户代理</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="log in logs" :key="log.id">
            <td>{{ log.id }}</td>
            <td>{{ log.ipAddress }}</td>
            <td>{{ JSON.parse(log.userAgent).userAgent }}</td>
            <td>{{ formatDate(log.createdAt) }}</td>
          </tr>
        </tbody>
      </table>
      <div class="pagination">
        <button @click="changePage(page - 1)" :disabled="page <= 1">上一页</button>
        <span>第 {{ page }} 页</span>
        <button @click="changePage(page + 1)" :disabled="logs.length < pageSize">下一页</button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        query: {
          ip: '',
          startDate: '',
          endDate: '',
        },
        logs: [],
        page: 1,
        pageSize: 10,
      };
    },
    methods: {
      fetchLogs() {
        const params = {
          ipAddress: this.query.ip,
          startTime: this.query.startDate ? new Date(this.query.startDate).toISOString() : '',
          endTime: this.query.endDate ? new Date(this.query.endDate).toISOString() : '',
          page: this.page,
          pageSize: this.pageSize,
        };
  
        axios.get('/api/system/logs', { params })
          .then(response => {
            if (response.data.code === 200) {
              this.logs = response.data.data; // 更新日志数据
            } else {
              console.error('查询失败:', response.data.message);
            }
            if (response.data.code === 40001) {
                this.$message.error(response.data.message);
            }
          })
          .catch(error => {
            console.error('查询日志时出错:', error);
          });
      },
      resetFilters() {
        this.query.ip = '';
        this.query.startDate = '';
        this.query.endDate = '';
        this.logs = [];
        this.page = 1; // 重置页码
      },
      changePage(newPage) {
        this.page = newPage;
        this.fetchLogs(); // 重新查询日志
      },
      formatDate(dateString) {
        const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
        return new Date(dateString).toLocaleString('zh-CN', options);
      },
    },
    mounted() {
      this.fetchLogs(); // 组件挂载后查询日志
    }
  };
  </script>
  
  <style scoped>
  .log-management {
    margin: 20px;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
  }
  
  .search-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .search-bar input[type="text"],
  .search-bar input[type="date"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .btn-search, .btn-reset {
    padding: 8px 15px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .btn-search {
    background-color: #28a745;
  }
  
  .btn-reset {
    background-color: #007bff;
  }
  
  .log-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
  }
  
  .log-table th, .log-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .log-table th {
    background-color: #f2f2f2;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  
  .pagination button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  </style>
  